Working with the Viewer > Overview - Architecture & Design |
The version 9.0 HTML5 Viewer offers the following features out of the box:
The viewer’s responsive UI is designed for phone, tablet, and desktop users. A single UI implementation adapts to the viewport size of the device or element in which it is embedded.
A jQuery plugin is used to embed the full-featured, responsive viewer on the page.
Example |
Copy Code
|
---|---|
$("#myDiv").pccViewer(pluginOptions);
|
The Viewer UI and behavior can be configured when the Viewer is embedded, using JavaScript parameters.
Example |
Copy Code
|
---|---|
var pluginOptions = { documentID : "1234abcd", encryption : false, viewMode : "EqualWidthPages" } |
Configurable options include:
If the Viewer needs to be customized more than configuration options allow, all UI code is open-source and can be modified to suit customization needs.
The open-source viewer code is separated into CSS files, template HTML files, and JavaScript. The code leverages custom HTML attributes and Underscore.js’ templating system in-order to maintain separation of concerns.
The viewer API offers complete control over the Viewer. The API allows callers to augment, customize, or automate the end user’s experience with the Viewer.
The API functionality covers:
Example |
Copy Code
|
---|---|
var api = $("#myDiv").pccViewer(pluginOptions).viewerControl; api.on("PageCountReady", function() { api.changeToLastPage(); }); |
The core component used by the HTML5 for rendering the document is the ViewerControl.
The ViewerControl is a component that can be used independent of the full HTML5 Viewer; it can be directly embedded into a page and used for building a fully custom UI.
Left example above: embedding the full HTML5 Viewer using the jQuery plugin. Right example above: embedding the ViewerControl alone. |
The ViewerControl does not have dependencies on third party libraries.